<template>
  <ContentWrap>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
    >
      <el-form-item label="hideId" v-show="false">
        <el-input v-model="formData.id" />
      </el-form-item>

      <el-tabs>
        <el-tab-pane label="基础">
          <el-form-item label="后台入口地址" prop="adminUrl">
            <el-input v-model="formData.adminUrl" placeholder="请输入后台入口地址" class="w-80!" />
          </el-form-item>
          <!-- <el-form-item label="担保交易比例" prop="guaranteeTradeUnitPrice">
            <el-input-number
              v-model="computedGuaranteeTradeUnitPrice"
              placeholder="请输入担保交易比例"
              :min="0"
              :max="99999999"
              :step="1"
              :precision="2"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              商家售卖担保类产品<span class="text-red-400"
                >销售单价每 1 元需缴纳担保金 {{ computedGuaranteeTradeUnitPrice }} 元。</span
              >
            </el-text>
          </el-form-item> -->
        </el-tab-pane>
        <el-tab-pane label="供应链">
          <el-form-item label="成本加价比例" prop="supplyCostPricePercent">
            <el-input-number
              v-model="formData.supplyCostPricePercent"
              placeholder="请输入成本加价比例"
              :min="0"
              :max="100"
              :step="1"
              :precision="4"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              在第三方供应链成本成本价的基础上加价百分比，
              <span v-if="formData.supplyCostPricePercent > 0" class="text-red-400">
                每 100 元加价 {{ formData.supplyCostPricePercent }} 元，需要把服务费考虑进去。</span
              >
              <span v-else class="text-red-400">0 表示不加价</span>
            </el-text>
          </el-form-item>
          <el-form-item label="批发减价比例" prop="supplyWholesalePricePercent">
            <el-input-number
              v-model="formData.supplyWholesalePricePercent"
              placeholder="请输入批发减价比例"
              :min="0"
              :max="100"
              :step="1"
              :precision="4"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              在第三方供应链成本成本价的基础上减价百分比，
              <span v-if="formData.supplyWholesalePricePercent > 0" class="text-red-400">
                每 100 元减价 {{ formData.supplyWholesalePricePercent }} 元，不会低于成本价。</span
              >
              <span v-else class="text-red-400">0 表示不减价</span>
            </el-text>
          </el-form-item>
          <el-form-item label="会员减价比例" prop="supplyVipPricePercent">
            <el-input-number
              v-model="formData.supplyVipPricePercent"
              placeholder="请输入会员减价比例"
              :min="0"
              :max="100"
              :step="1"
              :precision="4"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              在第三方供应链成本成本价的基础上减价百分比，
              <span v-if="formData.supplyVipPricePercent > 0" class="text-red-400">
                每 100 元减价 {{ formData.supplyVipPricePercent }} 元，不会低于批发价。</span
              >
              <span v-else class="text-red-400">0 表示不减价</span>
            </el-text>
          </el-form-item>
          <el-form-item label="零售减价比例" prop="supplySalePricePercent">
            <el-input-number
              v-model="formData.supplySalePricePercent"
              placeholder="请输入零售减价比例"
              :min="0"
              :max="100"
              :step="1"
              :precision="4"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              在第三方供应链成本成本价的基础上减价百分比，
              <span v-if="formData.supplySalePricePercent > 0" class="text-red-400">
                每 100 元减价 {{ formData.supplySalePricePercent }} 元，不会低于会员价。</span
              >
              <span v-else class="text-red-400">0 表示不减价</span>
            </el-text>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
</template>
<script lang="ts" setup>
import * as ConfigApi from '@/api/mall/config'
import { fenToYuan, yuanToFen } from '@/utils'

defineOptions({ name: 'MallConfig' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref<any>({
  id: undefined,
  supplyCostPricePercent: 0,
  supplyWholesalePricePercent: 0,
  supplyVipPricePercent: 0,
  supplySalePricePercent: 0,
  adminUrl: '',
  guaranteeTradeUnitPrice: 0
})

const computedGuaranteeTradeUnitPrice = computed({
  get: () => Number(fenToYuan(formData.value.guaranteeTradeUnitPrice)),
  set: (newValue: number) => {
    formData.value.guaranteeTradeUnitPrice = yuanToFen(newValue)
  }
})

const formRules = reactive({})
const formRef = ref() // 表单 Ref

/** 修改配置 */
const onSubmit = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value
    await ConfigApi.saveConfig(data)
    message.success(t('common.updateSuccess'))
    dialogVisible.value = false
  } finally {
    formLoading.value = false
  }
}

/** 获得配置 */
const getConfig = async () => {
  try {
    const data = await ConfigApi.getConfig()
    if (data === null) {
      return
    }
    Object.assign(formData.value, data)
  } finally {
  }
}

onMounted(() => {
  getConfig()
})
</script>
